<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>04_异步函数-await关键字使用</title>
    <!-- 
  在 JavaScript 中， `await`  关键字用于处理异步操作，通常与  `async`  函数一起使用。它使得异步代码的编写更加直观和易于理解。以下是关于  `await`  关键字使用的总结说明：
  1. 基本用法

  -  `await`  关键字只能在  `async`  函数内部使用。
  - 它用于等待一个 Promise 的解决（resolve），并返回该 Promise 的结果。
  - 如果 Promise 被拒绝（reject），则会抛出一个错误，可以通过  `try...catch`  语句来捕获。

  async function fetchData() {
      const response = await fetch('https://api.example.com/data'); // 等待 Promise 解决
      const data = await response.json(); // 继续等待解析 JSON
      return data;
  }
  2. 错误处理

  在使用  `await`  时，建议使用  `try...catch`  语句来捕获可能发生的错误，以避免未处理的 Promise 拒绝。
  async function fetchData() {
      try {
          const response = await fetch('https://api.example.com/data');
          if (!response.ok) {
              throw new Error('Network response was not ok');
          }
          const data = await response.json();
          return data;
      } catch (error) {
          console.error('Error fetching data:', error);
      }
  }
  3. 多个  `await`  的使用

  在  `async`  函数中，可以使用多个  `await`  来处理多个异步操作。每个  `await`  会依次等待前一个操作完成。
  async function fetchData() {
      const response1 = await fetch('https://api.example.com/data1');
      const data1 = await response1.json();
      
      const response2 = await fetch('https://api.example.com/data2');
      const data2 = await response2.json();
      
      return [data1, data2];
  }
  4. 并行执行

  如果需要并行执行多个异步操作，可以使用  `Promise.all()`  来同时处理多个 Promise，这样可以提高性能。
  async function fetchData() {
      const [response1, response2] = await Promise.all([
          fetch('https://api.example.com/data1'),
          fetch('https://api.example.com/data2')
      ]);
      
      const data1 = await response1.json();
      const data2 = await response2.json();
      
      return [data1, data2];
  }
  5. 总结

  -  `await`  关键字使得异步代码的书写更加简洁和可读。
  - 只能在  `async`  函数内部使用。
  - 可以与  `try...catch`  结合使用来处理错误。
  - 支持多个  `await`  的使用，能够依次处理异步操作。
  - 可以结合  `Promise.all()`  来并行处理多个异步操作，提高执行效率。
  --></head>
  <body>
    <script>
      // 1.普通函数
      // function foo1() {
      //   await 123
      // }
      // foo1()

      // 2. await 必须写在 async 函数中
      // await条件: 必须在异步函数中，不能单独使用
      function bar() {
        console.log("bar function");
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve("bar resolve");
          }, 2000);
        });
      }

      async function foo2() {
        console.log("foo2 function");
        const res = await bar();
        console.log(res); // bar resolve

        const res2 = await bar();
        console.log(res2); // bar resolve
      }
      foo2();
      console.log("hello world");

      // 3.await右侧的表达式一般为promise对象
      // 右侧不是promise对象，也会转成promise对象
      // 右侧是promise对象，await会等待promise对象结果
      async function foo3() {
        const res = await 123;
        console.log(res); // 123
      }
      foo3();

      // 4.await 返回的是promise成功的值
      async function foo4() {
        const res = await Promise.resolve("foo4 resolve");
        console.log(res); // foo4 resolve
      }
      foo4();

      // 5.await 报错，会中断async函数执行
      async function foo5() {
        const res = await Promise.reject("foo5 reject");
        console.log(res); // foo5 reject
      }
      foo5();
    </script>
  </body>
</html>
